<template>
	<view class="content-sex">
		<template v-if="isDefault">
			<view :class="['item', 'woman', value == 'female_photography' ? 'on' : '']"
				@click="select('female_photography')">
				<u-icon name="woman" size="30" :color="value == 'female_photography' ? '#fff' : '#ff557f'"></u-icon>
				<text>女</text>
			</view>
			<view :class="['item', 'man', value == 'male_photography' ? 'on' : '']" @click="select('male_photography')">
				<u-icon name="man" size="30" :color="value == 'male_photography' ? '#fff' : '#55aaff'"></u-icon>
				<text>男</text>
			</view>
		</template>
		<template v-else>
			<view class="sex-item" @click="select('male_photography')">
				<text>男</text>
				<view class="circle">
					<view v-if="value == 'male_photography'" class="circle-inner"></view>
				</view>
			</view>
			<view class="sex-item" @click="select('female_photography')">
				<text>女</text>
				<view class="circle">
					<view v-if="value == 'female_photography'" class="circle-inner"></view>
				</view>
			</view>

		</template>
	</view>
</template>

<script>
	export default {
		name: "sex",
		data() {
			return {

			};
		},
		props: {
			isDefault: {
				type: Boolean,
				default: true
			},
			value: {
				type: String,
				default: 'male_photography'
			}
		},
		methods: {
			// 选择
			select(sex) {
				this.$emit("input", sex);
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content-sex {
		display: flex;
		align-items: center;

		.item {
			display: flex;
			align-items: center;
			margin-right: 15rpx;
			border: 1rpx solid #ddd;
			border-radius: 10rpx;
			padding: 10rpx 20rpx;

			&:nth-child(2) {
				margin: 0;
			}

			text {
				font-size: 30rpx;
				margin-left: 10rpx;
			}


			&.woman {
				color: #ff557f;
				border-color: #ff557f;

				&.on {
					background-color: #ff557f;
					color: #fff;
				}
			}

			&.man {
				color: #55aaff;
				border-color: #55aaff;

				&.on {
					background-color: #55aaff;
					color: #fff;
				}
			}
		}

		.sex-item {
			display: flex;
			align-items: center;
			gap: 10rpx;
			margin-right: 60rpx;

			font-size:28rpx;
			.circle {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				border: 1rpx solid #000000;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.circle-inner {
				width: 18rpx;
				height: 18rpx;
				border-radius: 50%;
				background: #f56835;
			}
		}



	}
</style>